﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="resources/h-ui/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="resources/h-ui/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="resources/h-ui/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="resources/h-ui/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="resources/h-ui/static/h-ui.admin/css/style.css"/>
    <title>HowToDoIt:UserManager-Admin</title>
</head>
<body>
<!--_header 作为公共模版分离出去-->
<header class="navbar-wrapper">
    <div class="navbar navbar-fixed-top">
        <div class="container-fluid cl">
            <a class="logo navbar-logo f-l mr-10 hidden-xs" href="#">UserManager-Admin</a>
            <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="#">UserManager-Admin</a>
            <span class="logo navbar-slogan f-l mr-10 hidden-xs">v1.0</span>
            <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
            <nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
                <ul class="cl">
                    <li id="email"></li>
                    <li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a id="profile" href="javascript:;">个人信息</a></li>
                            <li><a id="logout" href="#">退出</a></li>
                        </ul>
                    </li>
                    <li id="Hui-skin" class="dropDown right dropDown_hover">
                        <a href="javascript:;" class="dropDown_A" title="换肤">
                            <i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i>
                        </a>
                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
                            <li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
                            <li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
                            <li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
                            <li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
                            <li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<!--/_header 作为公共模版分离出去-->
<!--_menu 作为公共模版分离出去-->
<aside class="Hui-aside">
    <div class="menu_dropdown bk_2">
        <dl id="menu-article">
            <dt class="selected"><i class="Hui-iconfont">&#xe616;</i> 用户管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
            </dt>
            <dd style="display:block">
                <ul>
                    <li class="current"><a href="user.html" title="用户列表"><i class="Hui-iconfont">&#xe667;</i> 用户列表</a></li>
                </ul>
            </dd>
        </dl>
    </div>
</aside>
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a>
</div>
<!--/_menu 作为公共模版分离出去-->
<section class="Hui-article-box">
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 用户管理
        <span class="c-gray en">&gt;</span>用户
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>
    <div class="Hui-article">
        <article class="cl pd-20">
            <!--<div class="cl pd-5 bg-1 bk-gray mt-20">
                <span class="l">
                    <a href="javascript:;" onclick="datadel()"
                       class="btn btn-danger radius">
                        <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
                    </a>
                </span>
            </div>-->
            <div class="mt-10">
                <table class="table table-border table-bordered table-bg table-sort">
                    <thead>
                    <tr class="text-c">
                        <th width="25"></th>
                        <th>用户ID</th>
                        <th>Email</th>
                        <th>FirstName</th>
                        <th>LstName</th>
                        <th>状态</th>
                        <!--<th>操作</th>-->
                    </tr>
                    </thead>
                    <tbody>
                </table>
            </div>
        </article>
    </div>
</section>
<div id="profileBox" style="display: none;">
    <form class="form form-horizontal" id="profileForm">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">用户ID：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="userIdSpan" name="id" disabled>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">邮箱：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="emailSpan" name="email" disabled>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">FirstNameSpan：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="firstNameSpan" name="firstName">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">LastNameSpan：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="lastNameSpan" name="lastName">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"> 密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" value="**********" placeholder="" id="passwordSpan"
                       name="password">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">状态：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="statusSpan" name="status" disabled>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button id="updateBtn" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i>
                    更新信息
                </button>
                <button id="closeBtn" class="btn btn-default radius" type="button">&nbsp;&nbsp;关闭&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="resources/h-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="resources/h-ui/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="resources/h-ui/static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="resources/h-ui/static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="resources/h-ui/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="resources/h-ui/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="resources/js/common.js"></script>
<script type="text/javascript">
    $(function () {
        $("#email").html(window.localStorage.getItem("email"));
        $.fn.dataTable.ext.errMode = "none";
        $('.table-sort')
            .on('error.dt', function (e, settings, techNote, message) {
                console.log('An error has been reported by DataTables: ', message);
            })
            .dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": URL + "/users",
                    "type": "GET",
                    "data": function (d) {
                        var newData = {};
                        // newData.draw = d.draw;
                        newData.q = d.search.value;
                        newData.page = d.start / d.length;
                        newData.pageSize = d.length;
                        console.log(d);
                        return newData;
                    },
                    "error": function (XMLHttpRequest, textStatus, errorThrown) {
                        var index = layer.alert(XMLHttpRequest.responseText, function () {
                            if (XMLHttpRequest.status == 403) {
                                location.href = "/login.html";
                            }
                            layer.close(index)
                        });
                    }
                },
                "columns": [
                    {"data": null},
                    {"data": "id"},
                    {"data": "email"},
                    {"data": "firstName"},
                    {"data": "lastName"},
                    {"data": "status"},
                    /*{"data": null},*/
                ],
                "columnDefs": [
                    {
                        "targets": 0,
                        "render": function (data, type, full) {
                            return "<input type=\"checkbox\" value=\"\">";
                        }
                    },
                    {
                        "targets": 5,
                        "render": function (data, type, full) {
                            if (data == 1) {
                                return "未激活";
                            } else if (data == 2) {
                                return "正常";
                            } else if (data == 3) {
                                return "已删除";
                            }
                        }
                    },
                    /*{
                        "targets": 6,
                        "render": function (data, type, full) {
                            return "<a style=\"text-decoration:none\"\n" +
                                "                               onClick=\"product_brand_edit('品牌编辑','codeing.html','1')\"\n" +
                                "                               href=\"javascript:;\" title=\"编辑\"><i class=\"Hui-iconfont\">&#xe6df;</i></a>\n" +
                                "                            <a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"active_del(this,'10001')\"\n" +
                                "                               href=\"javascript:;\" title=\"删除\"><i class=\"Hui-iconfont\">&#xe6e2;</i></a>";
                        }
                    }*/
                ],
                "language": {
                    "search": "按名字过滤:",
                    "searchPlaceholder": "firtName or lastName",
                    "paginate": {
                        "first": "首页",
                        "last": "最后一页",
                        "next": "下一页",
                        "previous": "上一页",
                    },
                    "infoFiltered": "",
                    "info": "显示第 _PAGE_ 页,总共: _PAGES_ 页",
                    "lengthMenu": "每页显示 _MENU_ 条数据",
                    "loadingRecords": "加载中...",
                    "processing": "正在处理...",
                    "zeroRecords": "数据为空",
                    "emptyTable": "数据为空",
                }
            });
        var profileLayer;
        $('#profile').click(function () {
            api("/my/profile", "GET", $("#loginForm").serialize(),
                function (data, textStatus, jqXHR) {
                    console.log(data);
                    $('#userIdSpan').val(data.user.id);
                    $('#emailSpan').val(data.user.email);
                    $('#firstNameSpan').val(data.user.firstName);
                    $('#lastNameSpan').val(data.user.lastName);
                    $('#statusSpan').val(data.user.status);
                    if (data.user.status == 1) {
                        $('#statusSpan').html("未激活");
                    } else if (data.user.status == 2) {
                        $('#statusSpan').html("正常");
                    } else if (data.user.status == 3) {
                        $('#statusSpan').html("已删除");
                    }
                    profileLayer = layer.open({
                        type: 1,
                        shade: false,
                        title: false, //不显示标题
                        area: ['900px', '500px'], //宽高
                        content: $('#profileBox'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                        cancel: function () {
                        }
                    });
                });
        });
        $('#updateBtn').click(function () {
            api("/users", "PUT", $("#profileForm").serialize(),
                function (data, textStatus, jqXHR) {
                    console.log(data);
                    var index = layer.alert("更新成功", function () {
                        layer.close(index);
                    });
                });
        });
        $('#closeBtn').click(function () {
            layer.close(profileLayer);
        });
        $('#logout').click(function () {
            api("/sessions", "DELETE", $("#loginForm").serialize(),
                function (data, textStatus, jqXHR) {
                    console.log(data);
                    var index = layer.alert("退出成功", function () {
                        location.href = "login.html";
                        layer.close(index)
                    });
                });
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>